import React from 'react'

const textCircle = [
	'textCircle',
	{
		draw(cfg, group) {
			// console.log(cfg)
			// 如果 cfg 中定义了 style 需要同这里的属性进行融合
			const keyShape = group.addShape('circle', {
				name: 'path-shape',
				attrs: {
					x: 0,
					y: 0,
					r: cfg.r,
					stroke: cfg.stroke,
					fill: cfg.fill,
				},
				// 设置 draggable 以允许响应鼠标的图拽事件
				draggable: true,
			})
			const { iconCfg } = cfg

			// 如果需要复杂的文本配置项，可以通过 labeCfg 传入
			const style = (cfg.labelCfg && cfg.labelCfg.style) || {}
			// style.text = cfg.label;
			group.addShape('text', {
				// attrs: style
				attrs: {
					x: 0, // 居中
					y: -48,
					textAlign: 'center',
					textBaseline: 'middle',
					text: cfg.label,
					fill: '#666',
					...style,
				},
				// must be assigned in G6 3.3 and later versions. it can be any value you want
				name: 'text-shape',
				// 设置 draggable 以允许响应鼠标的图拽事件
				draggable: true,
			})

			group.addShape('text', {
				// attrs: style
				attrs: {
					x: 0, // 居中
					y: 50,
					textAlign: 'center',
					textBaseline: 'middle',
					text: cfg.start,
					fill: '#666',
					...style,
				},
				// must be assigned in G6 3.3 and later versions. it can be any value you want
				name: 'text-shape',
				// 设置 draggable 以允许响应鼠标的图拽事件
				draggable: true,
			})

			group.addShape('rect', {
				// attrs: style
				attrs: {
					x: 0, // 居中
					y: 65,
					textAlign: 'center',
					textBaseline: 'middle',
					text: cfg.start,
					fill: '#f59a23',
					width: 2,
					height: 12,
					stroke: '#f59a23',
				},
				// must be assigned in G6 3.3 and later versions. it can be any value you want
				name: 'text-shape',
				// 设置 draggable 以允许响应鼠标的图拽事件
				draggable: true,
			})

			group.addShape('text', {
				// attrs: style
				attrs: {
					x: 0, // 居中
					y: 90,
					textAlign: 'center',
					textBaseline: 'middle',
					text: cfg.end,
					fill: '#666',
					...style,
				},
				// must be assigned in G6 3.3 and later versions. it can be any value you want
				name: 'text-shape',
				// 设置 draggable 以允许响应鼠标的图拽事件
				draggable: true,
			})

			return keyShape
		},
	},
	'circle',
]

export default textCircle
